<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件修饰符</title>
	</head>
	<body>
		<div id="app">
			<!-- 事件冒泡:
				如果将来的事件有嵌套关系,执行完成内部事件之后,执行外部事件的现象.
				1.阻止事件冒泡
				  语法:
					1.@click.stop="xxx"
					2.v-on:click.stop
				-->
			<div @click="addNum2">
				<h2>{{num}}</h2>
				<button @click.stop="addNum">增加</button>
			</div>
			<!-- 2.阻止默认的行为 
					如果需要阻止标签的默认行为则添加 @click.prevent="xxx" -->
			<div>
				<h3>阻止默认行为</h3>
				<a href="http://www.baidu.com" @click.prevent="baidu">百度</a>
				
			</div>
			<div>
				<h3>特殊按键字符说明</h3>
				<!-- 需求:要求用户按回车键出发 -->
				回车键触发:<input name="username" type="text" v-on:keyup.enter="handler()"/>
				删除键触发:<input name="delete" type="text" @keyup.delete="handler()" />
				tab键触发:<input name="tab" type="text" @keydown.tab="handler()" />
			</div>
			
			
		</div>
		<script src="../js/vue.js"></script>		
		<script>
			const app=new Vue({
				el: "#app",
				data:{
					num:1
				},
				methods:{
					addNum(){
						this.num++
					},
					addNum2(){
						this.num=this.num+2
					},
					baidu(){
						console.log("点击百度按钮,螺旋升天")
					},
					handler(){
						console.log("回车键触发")
					}
					
				}
			})
		</script>
		
		
	</body>
</html>
